<template>
  <div>
    <Header title="应付账款"></Header>
    <div class="page__main bg-white">
      <div class="page__scroller account-period">
        <div class="water-mark-wrap">
          <div class="title-bg">
            应付账款清理{{datePicker.showData}}情况
            <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>
          </div>
          <van-sticky :offset-top="46">
            <div class="pd-aside bg-white" style="padding: 10px;">
              <div class="selects" style="margin-bottom: 0">
                <div class="selects__item selects__item--date" @click="datePicker.show = true">
                  {{datePicker.showData}}
                </div>
                <div class="selects__item" @click="areaInfo.show = true">
                  {{areaInfo.showArea}}
                </div>
                <div class="selects__item" @click="cityInfo.show = true">
                  {{cityInfo.showArea}}
                </div>
              </div>
              <div class="selects" style="margin-bottom: 0">
                <div class="selects__item align-center" @click="period.show = true">
                  {{period.selectedShow}}
                </div>
              </div>
            </div>
          </van-sticky>
          <div class="box bg-white">
            <div class="box__head box__head--with-border">
              <div class="box__head-left">
                <span class="box__head-title">整体清理情况</span>
              </div>
              <div class="box__head-right">
                <span
                  class="box__head-action "
                  v-for="(item, index) in titleActions"
                  :key="index"
                  :class="item.id == totalClear.active ? 'box__head-action--selected' : ''"
                  @click="handleHeadTab('totalClear')"
                >{{item.name}}</span>
                <span class="box__head-mask" v-show="totalClear.loading"></span>
              </div>
            </div>
            <div class="mgb-10 pie">
              <div class="pie__unit">单位：{{pieData.unit}}</div>
              <div class="flex-parts">
                <div class="flex-parts__item">
                  <div class="pie__wrap">
                    <PieChart :data="pieData"></PieChart>
                    <div class="pie__center">
                      <div>{{pieData.name}}</div>
                      <div><span class="pie__center-num">{{numFormat(totalClear.total)}}</span></div>
                    </div>
                  </div>
                </div>
                <div class="flex-parts__item">
                  <div class="pie__legend">
                    <div
                      class="pie__legend-item"
                      v-for="(item, index) in pieData.data"
                      :key="index"
                    >
                      <div class="flex-parts">
                        <div class="flex-parts__item pie__legend-name">
                          <i class="pie__legend-icon" :style="{background: item.color}"></i>{{item.name}}
                        </div>
                        <div class="flex-parts__item flex-parts__item--none">
                          <div class="flex-parts__item pie__legend-value text--blue">{{numFormat(item.showValue)}}</div>
                        </div>
                      </div>
                      <div class="flex-parts pie__legend-detail">
                        <div class="flex-parts__item"><span class="pie__legend-info">较上日</span></div>
                        <div class="flex-parts__item flex-parts__item--none">
                          <span :class="item.compare > 0 ? 'text--red': 'text--green'">{{numFormat(item.compare)}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="part-loading" v-show="totalClear.loading">
                <van-loading size="24px" vertical>数据加载中...</van-loading>
              </div>
            </div>
            <div v-show="totalClear.chartShow">
              <div class="align-center">日变化趋势</div>
              <div class="chart-area mgb-15">
                <BarLine :data="totalClear.trend"></BarLine>
                <div class="total-bar-legend" v-show="totalClear.active == '2'">
                  <div class="total-bar-legend__wrap">
                    <div
                      class="total-bar-legend__item"
                      v-for="(item, index) in totalClear.trend.data"
                      :key="index"
                    >
                      <i class="total-bar-legend__icon" :style="{background: item.color[0]}"></i>
                      {{item.name}}（{{item.unit}}）
                    </div>
                  </div>
                </div>
                <div class="part-loading" v-show="totalClear.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
              <div v-show="areaBarShow">
                <div class="align-center">各地区整体情况</div>
                <div class="chart-area">
                  <BarLine :data="totalClear.areaTotal"></BarLine>
                  <div class="total-bar-legend" v-show="totalClear.active == '2'">
                    <div class="total-bar-legend__wrap">
                      <div
                        class="total-bar-legend__item"
                        v-for="(item, index) in totalClear.areaTotal.data"
                        :key="index"
                      >
                        <i class="total-bar-legend__icon" :style="{background: item.color[0]}"></i>
                        {{item.name}}（{{item.unit}}）
                      </div>
                    </div>
                  </div>
                  <div class="part-loading" v-show="totalClear.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" class="more" @click="handleMore('totalClear')">
              {{totalClear.chartShow ? '收起': '点击查看更多'}}
            </button>
          </div>
          <div class="box bg-white">
            <div class="box__head box__head--with-border">
              <div class="box__head-left">
                <span class="box__head-title">已完成支付订单</span>
              </div>
              <div class="box__head-right">
                <span
                  class="box__head-action "
                  v-for="(item, index) in titleActions"
                  :key="index"
                  :class="item.id == finishPay.active ? 'box__head-action--selected' : ''"
                  @click="handleHeadTab('finishPay')"
                >{{item.name}}</span>
                <span class="box__head-mask" v-show="finishPay.loading"></span>
              </div>
            </div>
            <div class="period-panel" v-show="finishPay.active == '1'">
              <div class="period-panel__item">
                <div class="period-panel__name">已支付金额</div>
                <div class="flex-parts" style="align-items: baseline">
                  <div class="flex-parts__item">
                    <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                    <span class="period-panel__num">{{numFormat(finishPay.col1)}}</span>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip flex-parts__item">
                    较上日
                    <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                    <span :class="finishPay.col2 > 0 ? 'text--red':'text--green'">{{numFormat(finishPay.col2)}}</span>
                    万元
                  </div>
                </div>
              </div>
            </div>
            <div class="period-panel period-panel--horizontal" v-show="finishPay.active == '2'">
              <div class="period-panel__item">
                <div class="period-panel__name">已完成支付订单</div>
                <div class="mgb-8">
                  <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                  <span class="period-panel__num">{{numFormat(finishPay.col3)}}</span>
                  <span>个</span>
                </div>
                <div class="period-panel__tip">
                  较上日
                  <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                  <span :class="finishPay.col4 > 0 ? 'text--red':'text--green'">{{numFormat(finishPay.col4)}}</span>
                  个
                </div>
              </div>
              <div class="period-panel__item">
                <div class="period-panel__name">占目标比重</div>
                <div class="mgb-8">
                  <span class="period-panel__num">{{finishPay.col5}}</span>
                  <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                  <span>%</span>
                </div>
                <div class="period-panel__tip">
                  较上日
                  <span :class="finishPay.col6 > 0 ? 'text--red':'text--green'">{{finishPay.col6}}</span>
                  <van-loading size="14px" v-show="finishPay.loading"></van-loading>
                  %
                </div>
              </div>
            </div>
            <div v-show="finishPay.chartShow">
              <div class="align-center">日变化趋势</div>
              <div class="chart-area mgb-15">
                <BarLine :data="finishPay.trend"></BarLine>
                <div class="part-loading" v-show="finishPay.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
              <div v-show="areaBarShow">
                <div class="align-center">各地区整体情况</div>
                <div class="chart-area">
                  <BarLine :data="finishPay.areaTotal"></BarLine>
                  <div class="part-loading" v-show="finishPay.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" class="more" @click="handleMore('finishPay')">
              {{finishPay.chartShow ? '收起': '点击查看更多'}}
            </button>
          </div>
          <div class="box bg-white">
            <div class="box__head box__head--with-border">
              <div class="box__head-left">
                <span class="box__head-title">部分支付</span>-余额较基准账期下降
              </div>
              <div class="box__head-right">
                <span
                  class="box__head-action "
                  v-for="(item, index) in titleActions"
                  :key="index"
                  :class="item.id == partPayOne.active ? 'box__head-action--selected' : ''"
                  @click="handleHeadTab('partPayOne')"
                >{{item.name}}</span>
                <span class="box__head-mask" v-show="partPayOne.loading"></span>
              </div>
            </div>
            <div class="period-panel" v-show="partPayOne.active == '1'">
              <div class="period-panel__item" style="border-bottom: 1px solid #e7e7e7">
                <div class="period-panel__name">基准账期余额</div>
                <div class="flex-parts" style="align-items: baseline">
                  <div class="flex-parts__item">
                    <span class="period-panel__num">{{numFormat(partPayOne.col1)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip flex-parts__item">
                    较上日
                    <span :class="partPayOne.col2 > 0 ? 'text--red':'text--green'">{{numFormat(partPayOne.col2)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    万元
                  </div>
                </div>
              </div>
              <div class="period-panel--horizontal">
                <div class="period-panel__item">
                  <div class="period-panel__name">已支付金额</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayOne.col3)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayOne.col4 > 0 ? 'text--red':'text--green'">{{numFormat(partPayOne.col4)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    万元
                  </div>
                </div>
                <div class="period-panel__item">
                  <div class="period-panel__name">当前余额</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayOne.col5)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayOne.col6 > 0 ? 'text--red':'text--green'">{{numFormat(partPayOne.col6)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    万元
                  </div>
                </div>
              </div>
            </div>
            <div class="period-panel" v-show="partPayOne.active == '2'">
              <div class="period-panel--horizontal">
                <div class="period-panel__item">
                  <div class="period-panel__name">余额下降订单数</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayOne.col7)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    <span>个</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayOne.col8 > 0 ? 'text--red':'text--green'">{{numFormat(partPayOne.col8)}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    个
                  </div>
                </div>
                <div class="period-panel__item">
                  <div class="period-panel__name">占目标比重</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{partPayOne.col9}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    <span>%</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayOne.col10 > 0 ? 'text--red':'text--green'">{{partPayOne.col10}}</span>
                    <van-loading size="14px" v-show="partPayOne.loading"></van-loading>
                    %
                  </div>
                </div>
              </div>
            </div>
            <div v-show="partPayOne.chartShow">
              <div class="align-center">日变化趋势</div>
              <div class="chart-area mgb-15">
                <BarLine :data="partPayOne.trend"></BarLine>
                <div class="part-loading" v-show="partPayOne.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
              <div v-show="areaBarShow">
                <div class="align-center">各地区整体情况</div>
                <div class="chart-area">
                  <BarLine :data="partPayOne.areaTotal"></BarLine>
                  <div class="part-loading" v-show="partPayOne.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" class="more" @click="handleMore('partPayOne')">
              {{partPayOne.chartShow ? '收起': '点击查看更多'}}
            </button>
          </div>
          <div class="box bg-white">
            <div class="box__head box__head--with-border">
              <div class="box__head-left">
                <span class="box__head-title">部分支付</span>-余额较基准账期上升
              </div>
              <div class="box__head-right">
                <span
                  class="box__head-action "
                  v-for="(item, index) in titleActions"
                  :key="index"
                  :class="item.id == partPayTwo.active ? 'box__head-action--selected' : ''"
                  @click="handleHeadTab('partPayTwo')"
                >{{item.name}}</span>
                <span class="box__head-mask" v-show="partPayTwo.loading"></span>
              </div>
            </div>
            <div class="period-panel" v-show="partPayTwo.active == '1'">
              <div class="period-panel__item" style="border-bottom: 1px solid #e7e7e7">
                <div class="period-panel__name">基准账期余额</div>
                <div class="flex-parts" style="align-items: baseline">
                  <div class="flex-parts__item">
                    <span class="period-panel__num">{{numFormat(partPayTwo.col1)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip flex-parts__item">
                    较上日
                    <span :class="partPayTwo.col2 > 0 ? 'text--red':'text--green'">{{numFormat(partPayTwo.col2)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    万元
                  </div>
                </div>
              </div>
              <div class="period-panel--horizontal">
                <div class="period-panel__item">
                  <div class="period-panel__name">余额上升</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayTwo.col3)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayTwo.col4 > 0 ? 'text--red':'text--green'">{{numFormat(partPayTwo.col4)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    万元
                  </div>
                </div>
                <div class="period-panel__item">
                  <div class="period-panel__name">当前余额</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayTwo.col5)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayTwo.col6 > 0 ? 'text--red':'text--green'">{{numFormat(partPayTwo.col6)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    万元
                  </div>
                </div>
              </div>
            </div>
            <div class="period-panel" v-show="partPayTwo.active == '2'">
              <div class="period-panel--horizontal">
                <div class="period-panel__item">
                  <div class="period-panel__name">余额上升订单数</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{numFormat(partPayTwo.col7)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    <span>个</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayTwo.col8 > 0 ? 'text--red':'text--green'">{{numFormat(partPayTwo.col8)}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    个
                  </div>
                </div>
                <div class="period-panel__item">
                  <div class="period-panel__name">占目标比重</div>
                  <div class="mgb-8">
                    <span class="period-panel__num">{{partPayTwo.col9}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    <span>%</span>
                  </div>
                  <div class="period-panel__tip">
                    较上日
                    <span :class="partPayTwo.col10 > 0 ? 'text--red':'text--green'">{{partPayTwo.col10}}</span>
                    <van-loading size="14px" v-show="partPayTwo.loading"></van-loading>
                    %
                  </div>
                </div>
              </div>
            </div>
            <div v-show="partPayTwo.chartShow">
              <div class="align-center">日变化趋势</div>
              <div class="chart-area mgb-15">
                <BarLine :data="partPayTwo.trend"></BarLine>
                <div class="part-loading" v-show="partPayTwo.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
              <div v-show="areaBarShow">
                <div class="align-center">各地区整体情况</div>
                <div class="chart-area">
                  <BarLine :data="partPayTwo.areaTotal"></BarLine>
                  <div class="part-loading" v-show="partPayTwo.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" class="more" @click="handleMore('partPayTwo')">
              {{partPayTwo.chartShow ? '收起': '点击查看更多'}}
            </button>
          </div>
          <div class="box bg-white">
            <div class="box__head box__head--with-border">
              <div class="box__head-left">
                <span class="box__head-title">未支付订单</span>
              </div>
              <div class="box__head-right">
                <span
                  class="box__head-action "
                  v-for="(item, index) in titleActions"
                  :key="index"
                  :class="item.id == unPay.active ? 'box__head-action--selected' : ''"
                  @click="handleHeadTab('unPay')"
                >{{item.name}}</span>
                <span class="box__head-mask" v-show="unPay.loading"></span>
              </div>
            </div>
            <div class="period-panel" v-show="unPay.active == '1'">
              <div class="period-panel__item">
                <div class="period-panel__name">当前余额</div>
                <div class="flex-parts" style="align-items: baseline">
                  <div class="flex-parts__item">
                    <span class="period-panel__num">{{numFormat(unPay.col1)}}</span>
                    <van-loading size="14px" v-show="unPay.loading"></van-loading>
                    <span>万元</span>
                  </div>
                  <div class="flex-parts__item period-panel__tip">
                    较上日
                    <span :class="unPay.col2 > 0 ? 'text--red':'text--green'">{{numFormat(unPay.col2)}}</span>
                    <van-loading size="14px" v-show="unPay.loading"></van-loading>
                    万元
                  </div>
                </div>
              </div>
            </div>
            <div class="period-panel period-panel--horizontal" v-show="unPay.active == '2'">
              <div class="period-panel__item">
                <div class="period-panel__name">未支付订单</div>
                <div class="mgb-8">
                  <span class="period-panel__num">{{numFormat(unPay.col3)}}</span>
                  <van-loading size="14px" v-show="unPay.loading"></van-loading>
                  <span>个</span>
                </div>
                <div class="period-panel__tip">
                  较上日
                  <span :class="unPay.col4 > 0 ? 'text--red':'text--green'">{{numFormat(unPay.col4)}}</span>
                  <van-loading size="14px" v-show="unPay.loading"></van-loading>
                  个
                </div>
              </div>
              <div class="period-panel__item">
                <div class="period-panel__name">占目标比重</div>
                <div class="mgb-8">
                  <span class="period-panel__num">{{unPay.col5}}</span>
                  <van-loading size="14px" v-show="unPay.loading"></van-loading>
                  <span>%</span>
                </div>
                <div class="period-panel__tip">
                  较上日
                  <span :class="unPay.col6 > 0 ? 'text--red':'text--green'">{{unPay.col6}}</span>
                  <van-loading size="14px" v-show="unPay.loading"></van-loading>
                  %
                </div>
              </div>
            </div>
            <div v-show="unPay.chartShow">
              <div class="align-center">日变化趋势</div>
              <div class="chart-area mgb-15">
                <BarLine :data="unPay.trend"></BarLine>
                <div class="part-loading" v-show="unPay.loading">
                  <van-loading size="24px" vertical>数据加载中...</van-loading>
                </div>
              </div>
              <div v-show="areaBarShow">
                <div class="align-center">各地区整体情况</div>
                <div class="chart-area">
                  <BarLine :data="unPay.areaTotal"></BarLine>
                  <div class="part-loading" v-show="unPay.loading">
                    <van-loading size="24px" vertical>数据加载中...</van-loading>
                  </div>
                </div>
              </div>
            </div>
            <button type="button" class="more" @click="handleMore('unPay')">
              {{unPay.chartShow ? '收起': '点击查看更多'}}
            </button>
          </div>
          <WaterMark :length="9"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="date"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      />
    </van-popup>
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <van-popup
      v-model="period.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="period.options"
        @cancel="cancelFnPeriod"
        @confirm="confirmFnPeriod"
      ></van-picker>
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
    <van-overlay class="page-loading" :show="pageLoading" :duration="0">
      <div class="wrapper">
        <van-loading size="34px" vertical>数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  import PieChart from './PieChart'
  import Choose from "@/components/Choose"
  import BarLine from '@/components/BarLineChartScroll'
  import data from './default-data.js'
  import WaterMark from '@/components/WaterMark'
  
  export default {
    components: {
      Header,
      PieChart,
      Choose,
      BarLine,
      WaterMark
    },
    data,
    methods: {
      handleMore(type) {
        ['totalClear', 'finishPay', 'partPayOne', 'partPayTwo', 'unPay'].forEach(item => {
          if (item != type) {
            this[item].chartShow = false
          }
        })
        if (this[type].chartShow == false) {
          this[type].chartShow = true
          let trendDataX = this[type].trend.dataX
          let areaTotalDataX = this[type].areaTotal.dataX
          this[type].trend.dataX = []
          this[type].areaTotal.dataX = []
          this[type].trend.dataX = trendDataX
          this[type].areaTotal.dataX = areaTotalDataX
        } else {
          this[type].chartShow = false
        }
      },
      handleHeadTab(type) {
        if(this[type].active == '1') {
          this[type].active = '2'
        } else if (this[type].active == '2') {
          this[type].active = '1'
        }
        switch (type) {
          case 'totalClear':
            this.payablesOverallList()
            break;
          case 'finishPay':
            this.paymentOrder()
            break;
          case 'partPayOne':
            this.partOrder()
            break;
          case 'partPayTwo':
            this.partRisingOrder()
            break;
          case 'unPay':
            this.partOutstandingOrder()
            break;
        }
      },
      //取消日期设置
      handleCanleDate() {
        this.datePicker.show = false
      },
      //选择日期
      handleConfirmDate(value) {
        this.handleCanleDate()
        let date = new Date(value)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let month1 = month < 10 ? '0' + month : month
        let day1 = day < 10 ? '0' + day : day
        let yesterdayTime = (new Date(value)).getTime() - 24*60*60*1000
        let yesterdayD = new Date(yesterdayTime)
        let yesterdayY = yesterdayD.getFullYear()
        let yesterdayM = yesterdayD.getMonth() + 1 < 10 ? '0' + (yesterdayD.getMonth() + 1): (yesterdayD.getMonth() + 1)
        let yesterdayDay = yesterdayD.getDate() < 10 ? '0' + yesterdayD.getDate() : yesterdayD.getDate()
        this.datePicker.showData = year + '年' + month + '月' + day + '日'
        this.datePicker.selectDate = year + '' + month1 + '' + day1
        this.datePicker.yesterday = yesterdayY + '' + yesterdayM + '' + yesterdayDay
        this.initPage()
      },
      //取消地市弹框
      cancelFn(area) {
        if (area == 'province') {
          this.areaInfo.show = false
        } else if (area == 'city') {
          this.cityInfo.show = false
        }
      },
      //确认
      confirmFnProvince(item, index) {
        if (this.areaInfo.selectId != item.id) {
          this.areaInfo.selectId = item.id
          this.areaId = item.id
          this.areaInfo.showArea = item.text
          this.cityInfo.columns = []
          this.cityInfo.showArea = '地市'
          if (this.role == 'province') {
            if (this.areaId != '100000') {
              this.areaInfo.columns = []
              this.getAreaInfo()
            } else {
              this.cityInfo.columns = [{text: '地市', id: '0'}]
            }
          } else {
            this.getAreaInfo()
          }
          this.areaBarShow = true
          this.initPage()
        }
        this.areaInfo.show = false
      },
      //确认地市
      confirmFnCity(item, index) {
        if (this.cityInfo.selectId != item.id) {
          this.cityInfo.selectId = item.id
          this.cityInfo.showArea = item.text
          if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
            this.areaId = item.id
            this.areaBarShow = false
          } else {
            this.areaId = this.areaInfo.selectId
            this.areaBarShow = true
          }
          this.initPage()
        }
        this.cityInfo.show = false
      },
      cancelFnPeriod() {
        this.period.show = false
      },
      confirmFnPeriod(item) {
        this.period.selected = item.id
        this.period.selectedShow = item.text
        this.period.show = false
        this.initPage()
      },
      //获得地市
      getAreaInfo() {
        let params = {
          statMonth: this.datePicker.selectDate,
          areaId: this.areaId
        }
    
        this.$http
          .post("api/yearCheckIndex/getKpiAreaInfo", params)
          .then(data => {
            //获取省会
            if (data.rows.length > 1) {
              this.areaInfo.columns = []
              data.rows.forEach(item => {
                this.areaInfo.columns.push({
                  text: item.area,
                  id: item.areaId
                })
              })
              this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
              this.cityInfo.columns.unshift({ text: "地市", id: "0" })
              this.areaInfo.showArea = '全国'
            }
            //获取地市
            if (data.rows2.length > 1) {
              this.cityInfo.columns = []
              data.rows2.forEach(item => {
                this.cityInfo.columns.push({
                  text: item.area,
                  id: item.areaId
                });
              });
              this.cityInfo.columns.unshift({ text: "地市", id: "0" })
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              if (this.role == "province") {
                this.areaInfo.columns.push(
                  {
                    text: data.rows[0].area,
                    id: data.rows[0].areaId
                  }
                )
                this.areaInfo.defaultIndex = 1
              }
            } else if (data.rows2.length == 1 ) {
              if (this.role == "city") {
                this.areaInfo.selectId = data.rows[0].areaId
                this.areaInfo.showArea = data.rows[0].area
                this.areaInfo.columns = [
                  {
                    text: data.rows[0].area,
                    id: data.rows[0].areaId
                  }
                ]
                this.cityInfo.selectId = data.rows2[0].areaId
                this.cityInfo.showArea = data.rows2[0].area
                this.cityInfo.defaultIndex = 1
                this.cityInfo.columns = [
                  {
                    text: data.rows2[0].area,
                    id: data.rows2[0].areaId
                  }
                ]
              }
            }
          });
      },
      //获得时间域
      getMaxMinMonth() {
        function dateSplit(param) {
          let paramStr = param + ''
          let dateStr = paramStr.replace(/(.{2})/g, '$1,')
          let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
          return dateArr
        }
        return new Promise((resolve, reject) => {
          this.$http.post('/api/yearCheckIndex/maxMonth', {type: '7'}).then(data => {
            let max = data.maps[0].MAX_MONTH
            let min = data.maps[0].MIN_MONTH
  
            let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
            let maxMonth = dateSplit(max)[2]
            let maxDay = dateSplit(max)[3]
            let minYear = dateSplit(min)[0] + dateSplit(min)[1]
            let minMonth = dateSplit(min)[2]
            let minDay = dateSplit(min)[3]
            let actualMaxMonth = parseInt(maxMonth) - 1
            let actualMinMonth = parseInt(minMonth) - 1
            let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
            let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay
  
            this.datePicker.currentDate = new Date(maxYear, actualMaxMonth, maxDay)
            this.datePicker.minDate = new Date(minYear, actualMinMonth, minDay)
            this.datePicker.maxDate = new Date(maxYear, actualMaxMonth, maxDay)
            let yesterdayTime = (new Date(this.datePicker.currentDate)).getTime() - 24*60*60*1000
            let yesterdayD = new Date(yesterdayTime)
            let yesterdayY = yesterdayD.getFullYear()
            let yesterdayM = (yesterdayD.getMonth() + 1) < 10 ? '0' + (yesterdayD.getMonth() + 1): (yesterdayD.getMonth() + 1)
            let yesterdayDay = yesterdayD.getDate() < 10 ? '0' + yesterdayD.getDate() : yesterdayD.getDate()
  
            this.datePicker.showData = maxYear + '年' + showMaxMonth + '月' + showMaxDay + '日'
            this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay
            this.datePicker.yesterday = yesterdayY + '' + yesterdayM + '' + yesterdayDay
            resolve("ok")
          })
        })
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      //获得整体情况
      payablesOverallList() {
        let params = {
          accountAge: this.period.selected,
          areaId: this.areaId,
          newsstateDate: this.datePicker.yesterday,
          stateDate: this.datePicker.selectDate,
          type: this.totalClear.active,
        }
        this.pieData.unit = ''
        this.pieData.name = ''
        this.pieData.data = []
        this.totalClear.total = ''
        this.totalClear.trend.dataX = []
        this.totalClear.trend.data = []
        this.totalClear.areaTotal.dataX = []
        this.totalClear.areaTotal.data = []
        this.totalClear.loading = true
        return new Promise((resolve, reject) => {
          this.$http.post('api/payables/payablesOverallList', params).then(res => {
            let pieData = res.payablesOverallList
            let trend = res.lineList
            let total = res.payableschart || []
            this.totalClear.total = pieData.ZCOL1
            if (this.totalClear.active == '1') {
              this.pieData.unit = '万元'
              this.pieData.name = '基准账期余额'
              this.totalClear.trend.legendShow = true
              this.totalClear.areaTotal.legendShow = true
              this.pieData.data.push(
                {
                  name: '已支付金额',
                  value: pieData.ZCOL3 < 0 ? '0' : pieData.ZCOL3,
                  showValue: pieData.ZCOL3,
                  color: '#FC5D5E',
                  compare: pieData.COUNT1,
                },
                {
                  name: '当前余额',
                  value: pieData.ZCOL2 < 0 ? '0' : pieData.ZCOL2,
                  showValue: pieData.ZCOL2,
                  color: '#FEB80E',
                  compare: pieData.COUNT2,
                },
              )
              this.totalClear.trend.data.push(
                {
                  name: '当前余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#57b1f9', '#57b1f9'],
                  values: []
                },
                {
                  name: '已支付金额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FC5D5E', '#FC5D5E'],
                  values: []
                }
              )
              this.totalClear.areaTotal.data.push(
                {
                  name: '当前余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#57b1f9', '#57b1f9'],
                  values: []
                },
                {
                  name: '已支付金额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FC5D5E', '#FC5D5E'],
                  values: []
                }
              )
              trend.forEach(item => {
                this.totalClear.trend.dataX.push(item.date)
                this.totalClear.trend.data[0].values.push(item.zcol3)
                this.totalClear.trend.data[1].values.push(item.zcol2)
              })
              total.forEach(item => {
                this.totalClear.areaTotal.dataX.push(item.COL1)
                this.totalClear.areaTotal.data[0].values.push(item.ZCOL3)
                this.totalClear.areaTotal.data[1].values.push(item.ZCOL2)
              })
            } else if (this.totalClear.active == '2') {
              this.pieData.unit = '个'
              this.pieData.name = '基准订单数'
              this.totalClear.trend.legendShow = false
              this.totalClear.areaTotal.legendShow = false
              this.pieData.data.push(
                {
                  name: '已完成支付',
                  value: pieData.ZCOL2,
                  color: '#FC5D5E',
                  compare: pieData.COUNT1,
                  showValue: pieData.ZCOL2,
                },
                {
                  name: '余额下降',
                  value: pieData.ZCOL4,
                  color: '#FEB80E',
                  compare: pieData.COUNT2,
                  showValue: pieData.ZCOL4,
                },
                {
                  name: '未支付',
                  value: pieData.ZCOL3,
                  color: '#56A8EE',
                  compare: pieData.COUNT3,
                  showValue: pieData.ZCOL3,
                },
                {
                  name: '余额上升',
                  value: pieData.ZCOL5,
                  color: '#259B24',
                  compare: pieData.COUNT4,
                  showValue: pieData.ZCOL5,
                },
              )
              this.totalClear.trend.data.push(
                {
                  name: '已完成支付',
                  type: 'bar',
                  unit: '个',
                  color: ['#FC5D5E', '#FC5D5E'],
                  values: []
                },
                {
                  name: '余额下降',
                  type: 'bar',
                  unit: '个',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
                {
                  name: '未支付',
                  type: 'bar',
                  unit: '个',
                  color: ['#FEB80E', '#FEB80E'],
                  values: []
                },
                {
                  name: '余额上升',
                  type: 'bar',
                  unit: '个',
                  color: ['#259B24', '#259B24'],
                  values: []
                }
              )
              this.totalClear.areaTotal.data.push(
                {
                  name: '已完成支付',
                  type: 'bar',
                  unit: '个',
                  color: ['#FC5D5E', '#FC5D5E'],
                  values: []
                },
                {
                  name: '余额下降',
                  type: 'bar',
                  unit: '个',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
                {
                  name: '未支付',
                  type: 'bar',
                  unit: '个',
                  color: ['#FEB80E', '#FEB80E'],
                  values: []
                },
                {
                  name: '余额上升',
                  type: 'bar',
                  unit: '个',
                  color: ['#259B24', '#259B24'],
                  values: []
                }
              )
              trend.forEach(item => {
                this.totalClear.trend.dataX.push(item.date)
                this.totalClear.trend.data[0].values.push(item.zcol2)
                this.totalClear.trend.data[1].values.push(item.zcol4)
                this.totalClear.trend.data[2].values.push(item.zcol3)
                this.totalClear.trend.data[3].values.push(item.zcol5)
              })
              total.forEach(item => {
                this.totalClear.areaTotal.dataX.push(item.COL1)
                this.totalClear.areaTotal.data[0].values.push(item.ZCOL2)
                this.totalClear.areaTotal.data[1].values.push(item.ZCOL4)
                this.totalClear.areaTotal.data[2].values.push(item.ZCOL3)
                this.totalClear.areaTotal.data[3].values.push(item.ZCOL5)
              })
            }
            this.totalClear.loading = false
            resolve('ok')
          })
        })
      },
      //获得已完成支付订单
      paymentOrder() {
        let params = {
          accountAge: this.period.selected,
          areaId: this.areaId,
          newsstateDate: this.datePicker.yesterday,
          stateDate: this.datePicker.selectDate,
          type: this.finishPay.active,
        }
        this.finishPay.col1 = ''
        this.finishPay.col2 = ''
        this.finishPay.col3 = ''
        this.finishPay.col4 = ''
        this.finishPay.col5 = ''
        this.finishPay.col6 = ''
        this.finishPay.trend.ys = false
        this.finishPay.areaTotal.ys = false
        this.finishPay.trend.dataX = []
        this.finishPay.trend.data = []
        this.finishPay.areaTotal.dataX = []
        this.finishPay.areaTotal.data = []
        this.finishPay.loading = true
        return new Promise((resolve, reject) => {
          this.$http.post('api/payables/PaymentOrder', params).then(res => {
            let total = res.payablesOverallList
            let trend = res.lineList
            let areaTotal = res.payableschart || []
            if (this.finishPay.active == '1') {
              this.finishPay.col1 = total.ZCOL1
              this.finishPay.col2 = total.COUNT1
              this.finishPay.trend.data.push({
                name: '已支付金额',
                type: 'bar',
                unit: '万元',
                color: ['#FF3737', '#FFADAD'],
                values: []
              })
              trend.forEach(item => {
                this.finishPay.trend.dataX.push(item.date)
                this.finishPay.trend.data[0].values.push(item.zcol1)
              })
              this.finishPay.areaTotal.data.push({
                name: '已支付金额',
                type: 'bar',
                unit: '万元',
                color: ['#FF3737', '#FFADAD'],
                values: []
              })
              areaTotal.forEach(item => {
                this.finishPay.areaTotal.dataX.push(item.COL1)
                this.finishPay.areaTotal.data[0].values.push(item.ZCOL1)
              })
            } else if (this.finishPay.active == '2') {
              this.finishPay.col3 = total.ZCOL1
              this.finishPay.col4 = total.COUNT1
              this.finishPay.col5 = total.ZCOL2
              this.finishPay.col6 = total.COUNT2
              this.finishPay.trend.ys = true
              this.finishPay.areaTotal.ys = true
              this.finishPay.trend.data.push(
                {
                  name: '已完成支付订单',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              trend.forEach(item => {
                this.finishPay.trend.dataX.push(item.date)
                this.finishPay.trend.data[0].values.push(item.zcol1)
                this.finishPay.trend.data[1].values.push(item.zcol2)
              })
              this.finishPay.areaTotal.data.push(
                {
                  name: '已完成支付订单',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.finishPay.areaTotal.dataX.push(item.COL1)
                this.finishPay.areaTotal.data[0].values.push(item.ZCOL1)
                this.finishPay.areaTotal.data[1].values.push(item.ZCOL2)
              })
            }
            this.finishPay.loading = false
            resolve('ok')
          })
        })
      },
      //余额较基准账期下降
      partOrder() {
        let params = {
          accountAge: this.period.selected,
          areaId: this.areaId,
          newsstateDate: this.datePicker.yesterday,
          stateDate: this.datePicker.selectDate,
          type: this.partPayOne.active,
        }
        this.partPayOne.col1 = ''
        this.partPayOne.col2 = ''
        this.partPayOne.col3 = ''
        this.partPayOne.col4 = ''
        this.partPayOne.col5 = ''
        this.partPayOne.col6 = ''
        this.partPayOne.col7 = ''
        this.partPayOne.col8 = ''
        this.partPayOne.col9 = ''
        this.partPayOne.col10 = ''
        this.partPayOne.trend.ys = false
        this.partPayOne.areaTotal.ys = false
        this.partPayOne.trend.stack = false
        this.partPayOne.areaTotal.stack = false
        this.partPayOne.trend.dataX = []
        this.partPayOne.trend.data = []
        this.partPayOne.areaTotal.dataX = []
        this.partPayOne.areaTotal.data = []
        this.partPayOne.loading = true
        return new Promise((resolve, reject) => {
          this.$http.post('api/payables/partOrder', params).then(res => {
            let total = res.payablesOverallList
            let trend = res.lineList
            let areaTotal = res.payableschart || []
            if (this.partPayOne.active == '1') {
              this.partPayOne.col1 = total.ZCOL1
              this.partPayOne.col2 = total.COUNT1
              this.partPayOne.col3 = total.ZCOL2
              this.partPayOne.col4 = total.COUNT2
              this.partPayOne.col5 = total.ZCOL3
              this.partPayOne.col6 = total.COUNT3
              this.partPayOne.trend.stack = true
              this.partPayOne.areaTotal.stack = true
              this.partPayOne.trend.round = 0
              this.partPayOne.areaTotal.round = 0
              this.partPayOne.trend.data.push(
                {
                  name: '当前余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FF3737', '#FF3737'],
                  values: []
                },
                {
                  name: '已支付金额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
              )
              trend.forEach(item => {
                this.partPayOne.trend.dataX.push(item.date)
                this.partPayOne.trend.data[0].values.push(item.zcol3)
                this.partPayOne.trend.data[1].values.push(item.zcol2)
              })
              this.partPayOne.areaTotal.data.push(
                {
                  name: '当前余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FF3737', '#FF3737'],
                  values: []
                },
                {
                  name: '已支付金额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.partPayOne.areaTotal.dataX.push(item.COL1)
                this.partPayOne.areaTotal.data[0].values.push(item.ZCOL3)
                this.partPayOne.areaTotal.data[1].values.push(item.ZCOL2)
              })
            } else if (this.partPayOne.active == '2') {
              this.partPayOne.col7 = total.ZCOL1
              this.partPayOne.col8 = total.COUNT1
              this.partPayOne.col9 = total.ZCOL2
              this.partPayOne.col10 = total.COUNT2
              this.partPayOne.trend.stack = false
              this.partPayOne.areaTotal.stack = false
              this.partPayOne.trend.round = 6
              this.partPayOne.areaTotal.round = 6
              this.partPayOne.trend.ys = true
              this.partPayOne.areaTotal.ys = true
              this.partPayOne.trend.data.push(
                {
                  name: '余额下降订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              trend.forEach(item => {
                this.partPayOne.trend.dataX.push(item.date)
                this.partPayOne.trend.data[0].values.push(item.zcol1)
                this.partPayOne.trend.data[1].values.push(item.zcol2)
              })
              this.partPayOne.areaTotal.data.push(
                {
                  name: '余额下降订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.partPayOne.areaTotal.dataX.push(item.COL1)
                this.partPayOne.areaTotal.data[0].values.push(item.ZCOL1)
                this.partPayOne.areaTotal.data[1].values.push(item.ZCOL2)
              })
            }
            this.partPayOne.loading = false
            resolve('ok')
          })
        })
      },
      //余额较基准账期上升
      partRisingOrder() {
        let params = {
          accountAge: this.period.selected,
          areaId: this.areaId,
          newsstateDate: this.datePicker.yesterday,
          stateDate: this.datePicker.selectDate,
          type: this.partPayTwo.active,
        }
        this.partPayTwo.col1 = ''
        this.partPayTwo.col2 = ''
        this.partPayTwo.col3 = ''
        this.partPayTwo.col4 = ''
        this.partPayTwo.col5 = ''
        this.partPayTwo.col6 = ''
        this.partPayTwo.col7 = ''
        this.partPayTwo.col8 = ''
        this.partPayTwo.col9 = ''
        this.partPayTwo.col10 = ''
        this.partPayTwo.trend.ys = false
        this.partPayTwo.areaTotal.ys = false
        this.partPayTwo.trend.stack = false
        this.partPayTwo.areaTotal.stack = false
        this.partPayTwo.trend.dataX = []
        this.partPayTwo.trend.data = []
        this.partPayTwo.areaTotal.dataX = []
        this.partPayTwo.areaTotal.data = []
        this.partPayTwo.loading = true
        return new Promise((resolve, reject) => {
          this.$http.post('api/payables/partRisingOrder', params).then(res => {
            let total = res.payablesOverallList
            let trend = res.lineList
            let areaTotal = res.payableschart || []
            if (this.partPayTwo.active == '1') {
              this.partPayTwo.col1 = total.ZCOL1
              this.partPayTwo.col2 = total.COUNT1
              this.partPayTwo.col3 = total.ZCOL3
              this.partPayTwo.col4 = total.COUNT3
              this.partPayTwo.col5 = total.ZCOL2
              this.partPayTwo.col6 = total.COUNT2
              this.partPayTwo.trend.stack = true
              this.partPayTwo.areaTotal.stack = true
              this.partPayTwo.trend.round = 0
              this.partPayTwo.areaTotal.round = 0
              this.partPayTwo.trend.data.push(
                {
                  name: '基准账期余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FF3737', '#FF3737'],
                  values: []
                },
                {
                  name: '余额上升',
                  type: 'bar',
                  unit: '万元',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
              )
              trend.forEach(item => {
                this.partPayTwo.trend.dataX.push(item.date)
                this.partPayTwo.trend.data[0].values.push(item.ZCOL1)
                this.partPayTwo.trend.data[1].values.push(item.zcol3)
              })
              this.partPayTwo.areaTotal.data.push(
                {
                  name: '基准账期余额',
                  type: 'bar',
                  unit: '万元',
                  color: ['#FF3737', '#FF3737'],
                  values: []
                },
                {
                  name: '余额上升',
                  type: 'bar',
                  unit: '万元',
                  color: ['#56A8EE', '#56A8EE'],
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.partPayTwo.areaTotal.dataX.push(item.COL1)
                this.partPayTwo.areaTotal.data[0].values.push(item.ZCOL1)
                this.partPayTwo.areaTotal.data[1].values.push(item.ZCOL3)
              })
            } else if (this.partPayTwo.active == '2') {
              this.partPayTwo.col7 = total.ZCOL1
              this.partPayTwo.col8 = total.COUNT1
              this.partPayTwo.col9 = total.ZCOL2
              this.partPayTwo.col10 = total.COUNT2
              this.partPayTwo.trend.stack = false
              this.partPayTwo.areaTotal.stack = false
              this.partPayTwo.trend.round = 6
              this.partPayTwo.areaTotal.round = 6
              this.partPayTwo.trend.ys = true
              this.partPayTwo.areaTotal.ys = true
              this.partPayTwo.trend.data.push(
                {
                  name: '余额上升订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              trend.forEach(item => {
                this.partPayTwo.trend.dataX.push(item.date)
                this.partPayTwo.trend.data[0].values.push(item.zcol1)
                this.partPayTwo.trend.data[1].values.push(item.zcol2)
              })
              this.partPayTwo.areaTotal.data.push(
                {
                  name: '余额上升订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.partPayTwo.areaTotal.dataX.push(item.COL1)
                this.partPayTwo.areaTotal.data[0].values.push(item.ZCOL1)
                this.partPayTwo.areaTotal.data[1].values.push(item.ZCOL2)
              })
            }
            this.partPayTwo.loading = false
            resolve('ok')
          })
        })
      },
      //未支付订单
      partOutstandingOrder() {
        let params = {
          accountAge: this.period.selected,
          areaId: this.areaId,
          newsstateDate: this.datePicker.yesterday,
          stateDate: this.datePicker.selectDate,
          type: this.unPay.active,
        }
        this.unPay.col1 = ''
        this.unPay.col2 = ''
        this.unPay.col3 = ''
        this.unPay.col4 = ''
        this.unPay.col5 = ''
        this.unPay.col6 = ''
        this.unPay.trend.ys = false
        this.unPay.areaTotal.ys = false
        this.unPay.trend.dataX = []
        this.unPay.trend.data = []
        this.unPay.areaTotal.dataX = []
        this.unPay.areaTotal.data = []
        this.unPay.loading = true
        return new Promise((resolve, reject) => {
          this.$http.post('api/payables/partOutstandingOrder', params).then(res => {
            let total = res.payablesOverallList
            let trend = res.lineList
            let areaTotal = res.payableschart || []
            if (this.unPay.active == '1') {
              this.unPay.col1 = total.ZCOL1
              this.unPay.col2 = total.COUNT1
              this.unPay.trend.data.push({
                name: '当前余额',
                type: 'bar',
                unit: '万元',
                color: ['#FF3737', '#FFADAD'],
                values: []
              })
              trend.forEach(item => {
                this.unPay.trend.dataX.push(item.date)
                this.unPay.trend.data[0].values.push(item.ZCOL1)
              })
              this.unPay.areaTotal.data.push({
                name: '当前余额',
                type: 'bar',
                unit: '万元',
                color: ['#FF3737', '#FFADAD'],
                values: []
              })
              areaTotal.forEach(item => {
                this.unPay.areaTotal.dataX.push(item.COL1)
                this.unPay.areaTotal.data[0].values.push(item.ZCOL1)
              })
            } else if (this.unPay.active == '2') {
              this.unPay.col3 = total.ZCOL1
              this.unPay.col4 = total.COUNT1
              this.unPay.col5 = total.ZCOL2
              this.unPay.col6 = total.COUNT2
              this.unPay.trend.ys = true
              this.unPay.areaTotal.ys = true
              this.unPay.trend.data.push(
                {
                  name: '未支付订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              trend.forEach(item => {
                this.unPay.trend.dataX.push(item.date)
                this.unPay.trend.data[0].values.push(item.zcol1)
                this.unPay.trend.data[1].values.push(item.zcol2)
              })
              this.unPay.areaTotal.data.push(
                {
                  name: '未支付订单数',
                  type: 'bar',
                  unit: '个',
                  color: ['#FF3737', '#FFADAD'],
                  values: []
                },
                {
                  name: '占目标比重',
                  color: "#ff8200",
                  type: 'line',
                  unit: '%',
                  values: []
                },
              )
              areaTotal.forEach(item => {
                this.unPay.areaTotal.dataX.push(item.COL1)
                this.unPay.areaTotal.data[0].values.push(item.ZCOL1)
                this.unPay.areaTotal.data[1].values.push(item.ZCOL2)
              })
            }
            this.unPay.loading = false
            resolve('ok')
          })
        })
      },
      //记录日志
      recordLogs() {
        let params = {
          userId: this.userInfo.user_id,
          verify_code: this.userInfo.verify_code,
          priv_id: '10102148',
        }
        this.$http.post("api/new/insertLogs", params).then(res => {})
      },
      initPage() {
        this.pageLoading = true
        Promise.all([
          this.payablesOverallList(),
          this.paymentOrder(),
          this.partOrder(),
          this.partRisingOrder(),
          this.partOutstandingOrder()
        ]).then(values => {
          this.pageLoading = false
        })
      }
    },
    created() {
      this.recordLogs()
      this.getAreaInfo()
      if (this.role == 'city') {
        this.areaBarShow = false
      }
      this.getMaxMinMonth().then(res => {
        if (res == 'ok') {
          this.initPage()
        }
      })
    },
  };
</script>

<style lang="scss" scoped>
  .selects__item--date {
    flex: none;
    width: 33%;
  }
  
  .box__head {
    margin-bottom: 15px;
    
    &-right {
      position: relative;
    }
  
    &-mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, .5);
    }
  }
  
  .flex-parts {
    display: flex;
    align-items: center;
    
    &__item {
      display: block;
      flex: 1;
      
      &--none {
        flex: none;
      }
    }
  }
  
  .period-panel {
    border: 1px solid #EFF2FC;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    margin-bottom: 10px;
  
    &__item {
      padding: 12px 16px;
      position: relative;
    
      .van-loading {
        display: inline-block;
      }
    }
  
    &__num {
      font-size: 20px;
      color: #558eff;
    }
  
    &__name {
      font-size: 15px;
      margin-bottom: 8px;
    }
  
    &__tip {
      color: #666;
      font-size: 13px;
    }
  
    &--vertical {
      .paper-card__item + .paper-card__item {
        border-top: 1px solid #e7e7e7;
      }
    }
  
    &--horizontal {
      display: flex;
    
      .period-panel__item {
        flex: 1;
      
        & + .period-panel__item {
          &::before {
            content: "";
            position: absolute;
            width: 1px;
            background: #e7e7e7;
            left: 0;
            top: 14px;
            bottom: 14px;
          }
        }
      }
    }
  }
  
  .pie {
    position: relative;
    
    &__wrap {
      position: relative;
      height: 140px;
    }
    
    &__legend {
      &-item {
        padding-left: 15px;
        position: relative;
        
        & + & {
          margin-top: 12px;
        }
      }
      
      &-icon {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        left: 0;
        top: 6px;
      }
  
      &-detail {
        color: #666;
      }
      
      &-info {
        font-size: 13px;
      }
  
      &-value {
        font-size: 16px;
      }
    }
    
    &__center {
      position: absolute;
      text-align: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      &-num {
        font-size: 16px;
      }
    }
    
    &__unit {
      text-align: right;
      color: #999;
    }
  }
  
  .more {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: none;
    border: 0;
    outline: none;
    color: #999;
  }
  
  .account-period {
    .water-mark {
      padding-top: 300px;
    }
  }

  .page-loading {
    z-index: 100!important;
    
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
  
  .part-loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  
    .van-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  
  .chart-area {
    height: 220px;
    position: relative;
  }
  
  .total-bar-legend {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 40px;
    background: #fff;
    text-align: center;
    
    &__wrap {
      text-align: left;
      display: inline-block;
      font-size: 0px;
      width: 240px;
    }
    
    &__item {
      display: inline-block;
      padding-left: 15px;
      position: relative;
      font-size: 12px;
      width: 50%;
      box-sizing: border-box;
    }
    
    &__icon {
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -5px;
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
  }
</style>
